<template>
  <div class="index">
    <swiper :pic="pic"></swiper>
    <div class="introduce">
      <div class="desc">
        <h1>vr</h1>
        <h2>
          VR全屋装
          <br />所见即所得
        </h2>
        <h3>01</h3>
        <h4>
          区别于传统装修公司，外卖提供整套的
          <br />VR全景方案100%还原未来新家
        </h4>
      </div>
      <div class="button">
        <a href="/" class="more">
          了解更多
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMidYMid"
            width="20.438"
            height="16.47"
            viewBox="0 0 20.438 16.47"
          >
            <defs />
            <g class="cls-1">
              <rect y="7.31" width="20" height="2" rx="0.9" ry="0.9" class="cls-2" />
              <path
                d="M20.156,7.615 L12.792,0.251 C12.441,-0.101 11.871,-0.101 11.520,0.251 C11.168,0.602 11.168,1.172 11.520,1.524 L18.883,8.888 C19.235,9.239 19.805,9.239 20.156,8.888 C20.508,8.536 20.508,7.966 20.156,7.615 Z"
                class="cls-3"
              />
              <path
                d="M12.792,16.187 L20.156,8.823 C20.508,8.472 20.508,7.902 20.156,7.551 C19.805,7.199 19.235,7.199 18.883,7.551 L11.520,14.915 C11.168,15.266 11.168,15.836 11.520,16.187 C11.871,16.540 12.441,16.540 12.792,16.187 Z"
                class="cls-3"
              />
            </g>
          </svg>
        </a>
        <div class="wave">
          <div class="circle01">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              preserveAspectRatio="xMidYMid"
              width="14"
              height="16"
              viewBox="0 0 14 16"
            >
              <defs />
              <g>
                <path
                  d="M5.654,-0.000 L7.347,-0.000 L7.347,15.000 L5.654,15.000 L5.654,-0.000 Z"
                  transform="translate(0.5 0.5)"
                  class="cls-1"
                />
                <path
                  d="M1.218,7.429 L6.961,13.305 L5.741,14.554 L-0.002,8.677 L1.218,7.429 Z"
                  transform="translate(0.5 0.5)"
                  class="cls-1"
                />
                <path
                  d="M6.037,13.305 L11.781,7.429 L13.002,8.677 L7.258,14.554 L6.037,13.305 Z"
                  transform="translate(0.5 0.5)"
                  class="cls-1"
                />
              </g>
            </svg>

            <div class="circle02">
              <div class="circle03">
                <div class="circle04"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="plan">
        <p>
          360旋转
          <br />VR全套方案
          <br />所见即所得
        </p>
      </div>
    </div>
    <div class="book">
      <div class="title">
        <img src="../assets/title.png" alt />
      </div>
      <h2>现在预约</h2>
      <h3>免费获得客厅VR全景方案</h3>
      <ValidationObserver v-slot="{ handleSubmit }">
        <form action @submit.prevent="handleSubmit(submit)">
          <label for>
            <validation-provider rules="required" v-slot="{ errors }">
              <input type="text" id="trigger1" v-model="style.value" placeholder="选择房型" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMidYMid"
                width="20.438"
                height="16.47"
                viewBox="0 0 20.438 16.47"
              >
                <defs />
                <g class="cls-1">
                  <path
                    d="M20.156,7.615 L12.792,0.251 C12.441,-0.101 11.871,-0.101 11.520,0.251 C11.168,0.602 11.168,1.172 11.520,1.524 L18.883,8.888 C19.235,9.239 19.805,9.239 20.156,8.888 C20.508,8.536 20.508,7.966 20.156,7.615 Z"
                    class="cls-3"
                  />
                  <path
                    d="M12.792,16.187 L20.156,8.823 C20.508,8.472 20.508,7.902 20.156,7.551 C19.805,7.199 19.235,7.199 18.883,7.551 L11.520,14.915 C11.168,15.266 11.168,15.836 11.520,16.187 C11.871,16.540 12.441,16.540 12.792,16.187 Z"
                    class="cls-3"
                  />
                </g>
              </svg>
              <span>{{ errors[0] }}</span>
            </validation-provider>
          </label>
          <label for>
            <validation-provider rules="required" v-slot="{ errors }">
              <input type="text" id="trigger2" v-model="city.value" placeholder="选择城市" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMidYMid"
                width="20.438"
                height="16.47"
                viewBox="0 0 20.438 16.47"
              >
                <defs />
                <g class="cls-1">
                  <path
                    d="M20.156,7.615 L12.792,0.251 C12.441,-0.101 11.871,-0.101 11.520,0.251 C11.168,0.602 11.168,1.172 11.520,1.524 L18.883,8.888 C19.235,9.239 19.805,9.239 20.156,8.888 C20.508,8.536 20.508,7.966 20.156,7.615 Z"
                    class="cls-3"
                  />
                  <path
                    d="M12.792,16.187 L20.156,8.823 C20.508,8.472 20.508,7.902 20.156,7.551 C19.805,7.199 19.235,7.199 18.883,7.551 L11.520,14.915 C11.168,15.266 11.168,15.836 11.520,16.187 C11.871,16.540 12.441,16.540 12.792,16.187 Z"
                    class="cls-3"
                  />
                </g>
              </svg>
              <span>{{ errors[0] }}</span>
            </validation-provider>
          </label>
          <label for>
            <validation-provider rules="required" v-slot="{ errors }">
              <input type="text" v-model="location" placeholder="所在小区" />
              <span>{{ errors[0] }}</span>
            </validation-provider>
          </label>
          <label for>
            <button @click="submit">立即预约</button>
          </label>
        </form>
      </ValidationObserver>
    </div>
  </div>
</template>

<script>
import swiper from '../components/swiper'
// picker插件 https://www.jianshu.com/p/f4c673f04128
import PickerExtend from 'picker-extend'
import { req } from '../api/axios'
export default {
  name: 'index',
  components: {
    swiper
  },
  data () {
    return {
      pic: [
        'https://rwxoss.oss-cn-hangzhou.aliyuncs.com/test/banner1%403.png',
        'https://rwxoss.oss-cn-hangzhou.aliyuncs.com/test/banner2%403.png'
      ],
      style: {
        value: '',
        list: ['毛胚房', '精装修', '别墅']
      },
      city: {
        value: [],
        list: [
          {
            id: 1,
            value: '浙江',
            childs: [{ id: 1, value: '杭州' }, { id: 1, value: '上海' }]
          },
          {
            id: 2,
            value: '广东',
            childs: [{ id: 1, value: '广州' }, { id: 1, value: '深圳' }]
          }
        ]
      },
      location: ''
    }
  },
  methods: {
    submit () {
      // 表单验证交给vee插件完成只有在验证通过的情况下才会执行此函数
      if (this.style.value && this.city.value) {
        req(
          '/api/requeturl',
          {
            type: this.style.value,
            city: this.city.value,
            location: this.location
          },
          {
            success (res) {
              console.log(res)
            },
            fail (res) {
              console.log(res)
            }
          }
        )
      } else {
        return false
      }
    }
  },
  mounted () {
    var mobileSelect1 = new PickerExtend({
      trigger: '#trigger1',
      title: '类型选择',
      wheels: [{ data: this.style.list }],
      callback: (indexArr, data) => {
        this.style.value = data[0]
      }
    })
    var mobileSelect2 = new PickerExtend({
      trigger: '#trigger2',
      title: '地点选择',
      wheels: [{ data: this.city.list }],
      callback: (indexArr, data) => {
        this.city.value = []
        this.city.value.push(data[0].value)
        this.city.value.push(data[1].value)
      }
    })
  }
}
</script>

<style lang="less">
@keyframes circle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.25);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  75% {
    transform: scale(1.75);
    opacity: 0.25;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.introduce {
  width: 750px;
  height: 1080px;
  background-image: url("https://rwxoss.oss-cn-hangzhou.aliyuncs.com/test/vr@3.png");
  background-size: contain;
  padding-left: 104px;
  > .desc {
    position: relative;
    padding-top: 80px;
    font-family: Helvetica, sans-serif;
    > h1 {
      position: absolute;
      font-size: 14px;
      color: #6f727c;
      transform: rotateZ(-90deg);
      font-weight: bold;
    }
    > h2 {
      position: relative;
      margin-bottom: 10px;
      margin-top: 40px;
      font-size: 48px;
      font-weight: normal;
      padding-top: 40px;
      color: #333;
      line-height: 80px;
      &::before {
        content: "";
        position: absolute;
        border-left: 1px solid #e0e2eb;
        height: 40px;
        top: 0;
        left: 10px;
      }
    }
    > h3 {
      position: absolute;
      left: 122px;
      font-size: 240px;
      font-weight: bold;
      top: 30px;
      color: rgba(57, 213, 194, 0.1);
    }
    > h4 {
      position: relative;
      padding-top: 40px;
      font-size: 26px;
      font-weight: normal;
      color: #c0c0c0;
      &::before {
        content: "";
        position: absolute;
        width: 50px;
        height: 1px;
        background-color: rgba(57, 213, 194, 1);
        top: 0px;
      }
    }
  }
  > .button {
    margin-top: 80px;
    position: relative;
    > .more {
      display: flex;
      width: 200px;
      height: 64px;
      font-size: 24px;
      line-height: 64px;
      border-radius: 32px;
      border: 1px solid #333;
      color: #333;
      text-indent: 36px;
      svg {
        width: 20px;
        height: 60px;
        padding-left: 15px;
      }
    }
    > .wave {
      position: relative;
      // padding-left: 200px;
      > .circle01 {
        position: absolute;
        left: 340px;
        top: 40px;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        background-color: rgba(57, 213, 194, 1);
        box-shadow: 2px 2px 20px rgba(57, 213, 194, 0.8);
        svg {
          position: absolute;
          left: 50%;
          top: 50%;
          fill: #fff;
          transform: translateX(-50%) translateY(-50%);
        }
        > .circle02 {
          width: 80px;
          height: 80px;
          border-radius: 100%;
          border: 1px solid rgba(57, 213, 194, 1);
          animation: circle 3s 0s ease-out infinite;
          > .circle03 {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            border: 1px solid rgba(57, 213, 194, 1);
            animation: circle 3s 1s ease-out infinite;
            > .circle04 {
              width: 80px;
              height: 80px;
              border-radius: 100%;
              border: 1px solid rgba(57, 213, 194, 1);
              animation: circle 3s 2s ease-out infinite;
            }
          }
        }
      }
    }
  }
  > .plan {
    position: relative;
    > p {
      position: absolute;
      font-size: 26px;
      color: #999;
      line-height: 36px;
      right: 50px;
      top: 50px;
    }
  }
}
.book {
  background-color: rgba(245, 245, 245, 1);
  padding-top: 60px;
  padding-bottom: 120px;
  > .title {
    height: 100px;
    width: 750px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    > img {
      width: 300px;
      height: 100px;
    }
  }
  > h2 {
    text-align: center;
    color: #000;
    font-size: 48px;
    font-weight: normal;
  }
  > h3 {
    position: relative;
    color: #333;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    padding-top: 48px;
    padding-bottom: 80px;
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 24px;
      width: 24px;
      transform: translateX(-50%);
      border-top: 1px solid rgba(57, 213, 194, 1);
    }
  }
  > span {
    > form {
      > label {
        display: block;
        width: 600px;
        margin: 0 auto;
        position: relative;
        > span {
          display: block;
          margin-bottom: 40px;
          > input {
            display: block;
            width: 600px;
            height: 80px;
            line-height: 80px;
            outline: none;
            text-indent: 20px;
          }
          > svg {
            position: absolute;
            z-index: 999;
            top: 10px;
            transform: rotateZ(90deg);
            fill: rgba(57, 213, 194, 1);
            right: 20px;
          }
          > span {
            color: red;
            font-size: 16px;
          }
        }
        > button {
          display: block;
          width: 100%;
          height: 80px;
          background-color: rgba(57, 213, 194, 1);
          border: none;
          outline: none;
          color: #fff;
          font-size: 28px;
        }
      }
    }
  }
}
</style>
